<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>planApplication</title>
    <link href="css/layui.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body >

    <div class = "planHeadToolBox">
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
				  <div class="layBox">
                    <!-- 专业-->
                   <div class = "planHeadToolItem">
                       <img class = "planHeadToolItemImag" src="images/firstZYIcon1.png">
                       <label class="layui-form-label planHeadToolSelectLabel">公司：</label>
                       <div class="layui-input-inline">
                           <select name="domain" id="ZYSelect" lay-filter='majorListFilter' lay-verify="required" readonly="true">
                              <!-- <option  class="ZYOption" value="744C9E44-76E1-4AB0-9080-E49A646D1D15">通号分公司</option> -->
                           </select>
                       </div>
                   </div>
                    <!-- 类型-->
                    <div class = "planHeadToolItem">
                        <img class = "planHeadToolItemImag" src="images/firstLXIcon.png">
                        <label class="layui-form-label planHeadToolSelectLabel">类型：</label>
                        <div class="layui-input-inline">
                            <select id = "LXSelect" class = "planHeadToolSelect" lay-verify="required" lay-search>
                                <!-- <option class="LXOption" value="05C9834A-67E8-4AF3-8554-2C1FEF10000A">补短板项目（发改委）</option> -->
                            </select>
                        </div>
                    </div>

                    <div class = "planHeadToolItem">
                        <img class = "planHeadToolItemImag planHeadToolItemImagYF" src="images/firstYFIcon.png">
                        <label class="layui-form-label planHeadToolSelectLabel">月份：</label>
                        <div class="layui-input-inline">
                            <input id="NYR" class="layui-input" type="text" lay-verify="date" placeholder="" autocomplete="off">
                        </div>
                    </div>
					
					<div  class="btnBox">
						<button type="button" class="layui-btn btnClick">查询</button>
					</div>
                   </div>
                    <!-- 项目-->
                    <div class = "planHeadToolItem planHeadToolItemSearchBox">
                        <div class="layui-input-inline planHeadToolItemSearchInput">
                           
                           
							<div class="searchBox">
								<i class="clearBtn"></i>
								<input id = "proSearchWord" type="text"  class="layui-input" value=""  data-idx=""  autocomplete="off"  placeholder="请输入项目"  />
								<div id="dataList">
									
								</div>
								
							</div>
							<div class = "planHeadToolItemSearchImg" align="center">
							    <button  type="button" id = "proSearchBtn" class="planHeadToolItemSearchBtn" ></button>
							</div>
							
							
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class = "planLeftToolBox">
       <div  class="menuItem">
       	<div class = "planLeftTitleBox" align="center">
       		<div class = "planLeftTitleText" id = "planLeftTitle">维保进度总览</div>
       	</div>
       	<div  class = "planLeftToolBody" align="center">
       		<button  class = "planLeftToolItem" rel-url = "overview.html">进度总览</button>
       	</div>
       </div>
       
       <div class="menuItem2">
       	<div class = "planLeftTitleBox" align="center">
       		<div class="planLeftToolTitle" >
       			<div  class="planLeftToolLeft">
       				<span><i></i></span>
       				<span>返回首页</span>
       			</div>
       			<div  class="planLeftToolRight">
       				
       			</div>
       		</div>
       	</div>
       	<div  class = "planLeftToolBody" align="center">
       		<button  class = "planLeftToolItem" rel-url = "progress.html">节点</button>
       		<button  class = "planLeftToolItem planLeftActive" rel-url = "investment.html">投资数</button>
       		<button  class = "planLeftToolItem" rel-url = "fundsAmount.html">资金数</button>
       		<button  class = "planLeftToolItem" rel-url = "imgProgress.html">形象进度</button>
       	</div>
       </div>
    </div>

    <div class = "planApplicationIframeBody">
        <iframe id="homeIframe" src='overview.html' frameborder="0" style = "width: 100%;height:100%"></iframe>
    </div>


</body>
<script src="layui.js"></script>
<script src="index.js"></script>
<script>
    layui.config({
        base: ''
    });
    layui.use(['layer','form','element','laydate'], function () {//,'element'
        var layer = layui.layer
            , element = layui.element
            , form = layui.form
            , $ = layui.$
            , laydate = layui.laydate;
			
			
		var  isShow = {
		        asideShow:true,	
				relUrl:"overview.html",
		     }	
			
		//条件查询数据加载 
		function getData(url){
		    var def = $.Deferred();
		    $.ajax({
		        url:getIP() + url,
				type: 'get',
		        async:true,
		    }).then(function(data){
		        def.resolve(data);//data 将作为参数传递到Then中.
		    },function () {
		        def.reject();
		    })
		    return def.promise();
		}	
			
		$.when(getData('/search/major'),getData('/search/nature')).then(function(data1,data2) {
			if(data1.code == "succee"){
				var dataRows = data1.rows;
					$('#ZYSelect').empty();
					$.each(dataRows, function(i, item) {
						$('#ZYSelect').append(new Option(item.label, item.value));
					});
					$("#ZYSelect").find("option").eq(6).attr("selected", "true");
					form.render('select');
			}
			if(data2.code == "succee"){
				var dataRows = data2.rows;
					$('#LXSelect').empty();
					$.each(dataRows, function(i, item) {
						$('#LXSelect').append(new Option(item.label, item.value));
					});
					$("#LXSelect").find("option").eq(0).attr("selected", "true");
					form.render('select');
			}
			
			// 首次加载
			 overviewFun();
		},function() {
		    console.log('error...')
		})	
		
			
        //初始化 年月 选择器 当前时间
        var time = new Date();
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = year + '-' + month
        $("#NYR").val(date);
        
		
		
		function  overviewFun(){
			//----公司id
			var companyId = $("#ZYSelect option:selected").val();  
			 //----类型
			var natureId = $("#LXSelect option:selected").val();
			 // 年月
			var  time = $("#NYR").val();
			if(time){
			    var  year = time.substr(0,4);
				var  month = time.substr(5,6);
			}
            //项目id
            var  idx = $("#proSearchWord").attr("data-idx");
   
			var paramStr = {
				"proId":idx,
				"companyId":companyId,
				"year":year,
				"month":month,
				"natureId":natureId
			}
		    
			$("#homeIframe").attr("src",isShow.relUrl+"?paramStr="+JSON.stringify(paramStr))
		} 
	   
	   
		// ----点击查询--------
		$(".btnClick").on("click",function(){
				 overviewFun();		
		})
     
      

	    //------搜索项目-------  
	
        $('#proSearchWord').on('keyup',function () {
				 $("#dataList").show();
				 var proSearchWord = $("#proSearchWord").val();
				 	searchBtn(proSearchWord);		   
        });
		
		function  searchBtn(proSearchWord){
			$.ajax({
			    url: getIP() + '/search/proSearch',
			    type: 'get',
				contentType:'application/json',
				dataType:"json",
			    data:{proText:proSearchWord},
			    success: function (data) {
			        if (data.code == 'succee') {
			
					   var dataRows = data.rows;
						   $('#dataList').empty();
						   var  htmlDom = "";
						   $.each(dataRows, function(i, item) {
					            htmlDom += "<div  class='itemBtn'   data-id='"+item.value+"' data-text='"+item.label+"'>"+item.label+"</div>"
						   });
						   $('#dataList').html(htmlDom);  
			        }
			    },
			});		
			
		}
		 
		$("#dataList").off("click").on("click","div",function(event){
		   event.stopPropagation();//阻止冒泡事件    阻止点击事件向上传播
		  var  idx = $(this).attr("data-id");
		  var   txt = $(this).attr("data-text");
		  $("#proSearchWord").val(txt);
		  $("#proSearchWord").attr("data-idx",idx);
		  $("#dataList").hide();
		  $(".planHeadToolItemSearchImg").show();
		}) 
		 
		  
		
		
		
		

        //-------点击跳转-------- 
		$("#proSearchBtn").click(function () {
			// 点击搜索切换页面
			// isShow.asideShow = false;
			
			$("#ZYSelect").attr("disabled","disabled");
			$("#LXSelect").attr("disabled","disabled");
			form.render();
			
			
			$(".planLeftToolBody>button").removeClass('planLeftActive');
			$(".planLeftToolBody>button").eq(1).addClass("planLeftActive");
			var  txt = $("#proSearchWord").val();
			var  idx = $("#proSearchWord").attr("data-idx"); 
			// var  relUrl = "progress.html?proId="+idx;
			$(".menuItem").hide();
			$(".menuItem2").show();
			// $(".btnBox").hide();
			if(txt.length<20){
				$(".planLeftToolRight").css({"font-size":"2rem"});
			}else{
				$(".planLeftToolRight").css({"font-size":"1.5rem"});
			}
			
			$(".planLeftToolRight").text(txt);
			// $("#homeIframe").attr("src",relUrl);
			$(".planHeadToolItemSearchBox").hide();
			// var   proId= $("#proSearchList>option").attr("rel-value");
            localStorage.setItem("proId",idx);
			
			isShow.relUrl = "progress.html";
			overviewFun();
        });

        //年月选择器
        laydate.render({
            elem: '#NYR'
            ,type: 'month'
            ,change: function(value, date){
                // layer.msg(value); //得到日期生成的值，如：2017-08-18
                // console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            }
        });

       
	   
	 // 菜单样式切换-----------------------------------------------------------------------------------------------------------------
	 var    listBtn =  $(".planLeftToolBody>button");
			listBtn.on("click",function(e){
				// var  index = $(this).index();
				var  text = $(this).text();
				$(this).addClass("planLeftActive").siblings().removeClass('planLeftActive');
                isShow.relUrl = $(this).attr("rel-url");
                overviewFun();
			}) 
			
			
		//点击返回按钮
		$(".planLeftToolLeft").on("click",function(){
			  $("#ZYSelect").removeAttr("disabled");
			  $("#LXSelect").removeAttr("disabled");
			  form.render();
			  $(".planHeadToolItemSearchBox").show();
			  $(".menuItem").show();
			  $(".menuItem2").hide();
			  	$(".btnBox").show();
			   isShow.relUrl = "overview.html";
			  overviewFun();
			  
		})
		
		
		
	});
	


	
	
</script>
<style>
	  html,body{
		  font-size:62.5%;  
	  } 
	  .planHeadToolBox{
		  width: 100%;
		  height:5rem;
	  }

       .layui-anim-upbit,.laydate-footer-btns span{
           border: 1px solid #5377ED !important;
           box-shadow: 0px 0px 10px 0px #0D44A9 !important;
           border-radius: 10px !important;
           background-color: #fff0 !important;
       }
       .laydate-footer-btns span{
           margin-left: 5px;
       }
       .layui-laydate-content{
           width: 272px !important;
           height: 230px !important;
       }
       .layui-laydate-content > table > tbody{
           display: none;
       }
       #layui-laydate1{
           width: 274px !important;
           height: 324px !important;
       }
   
       #layui-laydate1,.laydate-month-list{
           border: 1px solid #5377ED !important;
           box-shadow: 0px 0px 10px 0px #0D44A9 !important;
           border-radius: 10px !important;
           background-color: #fff0 !important;
           z-index: 999;
       }
       .layui-input-inline{
           /* width: 232px; */
           /* height: 51px; */
           /* font-size: 18px; */
           font-family: Microsoft YaHei;
           font-weight: 400;
           color: #84B0F9;
           /* line-height: 160px; */
       }
       .planHeadToolItem{
           display: inline-block;
       }
       .planHeadToolItemImag{
		  width: 25px;
		  height: 25px;
		  position: absolute;
		  top: 7px;
		  padding-left: 40px;
       }
       .planHeadToolSelectLabel{
           width: 100px;
           height: 20px;
           font-size:1.5rem;
           font-family: Microsoft YaHei;
           font-weight: 400;
           color: #FFFFFF;
   
       }
       .planHeadToolSelect,dd,input,li{
           font-size: 18px;
           font-family: Microsoft YaHei;
           font-weight: 400;
           color: #84B0F9;
           /* line-height: 160px; */
       }
       .laydate-set-ym > span,.laydate-footer-btns > span{
           font-family: Microsoft YaHei;
           font-size: 18px;
           color: #84B0F9;
       }
       .layui-form{
           margin-top: 16px;
       }
       .planHeadToolItemSearchImg{
		   width: 4rem;
		   height: 3.5rem;
		   background: #1749EC;
		   border-radius: 0px 5px 5px 0px;
		   display:none;
        /*   position: absolute;
           top:0rem;
           right:0rem; */
       }
   
       .planHeadToolItemSearchBox{
		   width:20%;
           float: right;
       }
       .planHeadToolItemSearchInput{
           width: 100% !important;
		   display: flex;
		   flex-direction: row;
       }
       .planHeadToolItemSearchBtn{
           width: 20px;
           height: 20px;
           background-image: url(images/firstHeadToolSearchBtn.png);
           background-size: 100% 100%;
           border: 0;
           border-width: 0px !important;
           background-color: #fff0 !important;
		   margin-top: 0.8rem;
		   cursor: pointer;
       }
   
       .planLeftToolBox{
           width:19%;
           height: 90.5%;
           background-image: url(images/fristLeftToolBG1.png);
           background-size: 100% 100%;
       }
   
       .planLeftTitleBox{
           width:100%;
   		   height: auto;
           background-image: url(images/firstLeftToolTitleBG1.png);
           background-size: 100% 100%;
           /* margin-left: 5px; */
       }
       .planLeftTitleText{
           width: 156px;
           height: 60px;
           font-size: 26px;
           font-family: Microsoft YaHei;
           font-weight: bold;
           color: #FFFFFF;
           line-height: 60px;
       }
       .planLeftToolBody{
           /* margin-top: 15px; */
		   padding: 1.5rem 2rem 1.5rem 2rem;
		   box-sizing: border-box;
       }
       .planLeftToolItem{
		   width: 100%;
		   height: 5rem;
		   line-height: 5rem;
		   background: rgba(19, 32, 124, 0);
		   border: 1px solid #103D7B;
		   box-shadow: 0px 0px 40px 0px rgba(188, 215, 255, 0.2) inset;
		   border-radius: 10px;
		   margin-bottom: 10px;
		   cursor:pointer;
		   font-size:18px;
       }
       .planApplicationIframeBody{
		   position: absolute;
		   left: 19.5%;
		   top: 7rem;
		   bottom:1rem;
		   right:1rem;
		   box-sizing: border-box;
		   overflow:hidden;
       }
       #proSearchList{
       }
   	.planLeftActive{
   		background: rgba(19, 32, 124, 0);
   		border: 1px solid #8DB8FF;
   		box-shadow: 0px 0px 40px 0px rgba(188, 215, 255, 0.46) inset;
   		border-radius: 10px;
   	}
   	.planLeftToolTitle{
   		width:100%;
   		height:100px;
   		display: flex;
   		flex-direction: row;
   	}
   	.planLeftToolLeft{
   		width:24%;
   		height:100%;
   		background: #4F86E8;
   		border-radius: 8px 0px 0px 0px;
   		cursor:pointer; 
   		display: inline-block;
   	}
   	.planLeftToolLeft  span:first-child{
   		width: 100%;
   		height:40px;
   		display: block;
   		margin-top: 20px;
   	}
   	.planLeftToolLeft  span:last-child{
   		width: 100%;
   		height: 39px;
   		display: block;
   		font-size:12px;
   		padding-top: 5px;
   		box-sizing: border-box;
   		
   	}
   	.planLeftToolLeft  span>i{
   		width: 40px;
   		height:40px;
   		display: block;
   		background-image: url(./images/homeIcon.png);
   		background-size:100% 100%;
   		background-repeat: no-repeat;
   	}
       .planLeftToolRight{
   		width: 74%;
   		height: 100%;
   		color: #ffffff;
   		font-size:1.6rem;
   		font-family: Microsoft YaHei;
   		font-weight: bold;
   		text-align: left;
   		padding:10px;
   		display: inline-block;
   		box-sizing: border-box;
		display: flex;
		align-items: center;
       }
   	.layui-form-item .layui-inline{
   		display: flex;
   		flex-direction: row;
   	}
   	.layui-inlineLeft{
   		width:90%;
   		display: inline-block;
   	}
	
     /* ---------------layui --------------*/
	 .layBox{
		 width:80%;
		 display: flex;
		 flex-direction: row;
	 }	 
	.layui-input, .layui-select, .layui-textarea {
	    height:3.5rem;
	    line-height: 3.5rem;
	    border-width: 1px;
	    border-style: solid;
		border-color:#0D44A9; 
	    background-color:#0A3269;
	    border-radius: 5px;
        box-shadow: 0px 0px 10px 0px #0D44A9 inset;
	}
	.layui-input:hover, .layui-textarea:hover {
	    border-color: #4985FB !important;
	}
	.layui-input:focus, .layui-textarea:focus {
	    border-color: #4985FB !important;
	}
	.layui-form-select .layui-edge {
	    border-top-color:#84B0F9;
	}
	
   	input::-webkit-input-placeholder{
   		color: #84B0F9;
   		font-size: 12px;
   		padding: 0 5px;
   		box-sizing: border-box;
   		/* vertical-align: middle; */
   	}
   	input::-moz-placeholder{   /* Mozilla Firefox 19+ */
   		color: #84B0F9;
   	}
   	input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
   		color: #84B0F9;
   	}
   	input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
   		color: #84B0F9;
   	}
	
	.layui-anim-upbit, .laydate-footer-btns span {
	    border: 1px solid #5377ED !important;
	    border-radius: 5px !important;
	    background-color: #0A3269 !important;
	}
	.layui-form-select dl {
	    padding: 0px 0 !important;
	}	
	.layui-form-select dl dd.layui-this {
	    background-color: #113C77 !important;
	    color: #fff;
	}
	#layui-laydate1, .laydate-month-list {
	    border-radius: 5x !important;
	    background-color:  #0A3269 !important;
	    z-index: 999;
	}
	.layui-laydate-header i.laydate-prev-y {
	    color:#84B0F9;
	}
	.layui-laydate-header i.laydate-next-y {
	    color:#84B0F9;
	}
	.layui-laydate .layui-this {
	    background-color: #84B0F9 important;
	    color: #fff !important;
	}
	.layui-laydate-content td:hover, .layui-laydate-list li:hover {
	    background-color:#84B0F9;
	    color: #333;
	}
	
	.menuItem2{
		display: none;
	}
	.btnBox{
		width:8rem;
		height:3.5rem;
		display: inline-block;
		text-align: center;
	}
	.layui-btn {
	    display: inline-block;
	    height: 3.5rem;
	    line-height: 3.5rem;
		background:#1749EC;
		color: #fff;
	}	
	
	.menuItem,.menuItem2{
		padding: 0px 0.5rem;
		box-sizing: border-box;
	}
	
	.layui-form-item .layui-input-inline {
	    width: 58%;
		margin-right: 0;
	}
	.layui-laydate .layui-this {
	    background-color: #1749EC!important;
	}
	.searchBox{
		width:100%;
		height:auto;
		position: relative;
	}
	
	.searchBox .layui-input, .layui-select, .layui-textarea {
	    border-radius: 5px 0 0 5px !important;
	}
	
	#dataList{
		width: 100%;
		height: auto;
		max-height: 20rem;
		overflow: auto;
		border: 1px solid #5377ED;
		border-radius: 5px;
		background-color: #0A3269;
		position: absolute;
		top:3.8rem;
		left:0;
		right:0;
		z-index:9;
		display: none;
	}
	#dataList>div{
		width: 100%;
		height: 3.5rem;
		line-height:3.5rem;
		text-align: left;
		align-items: center;
		font-size: 1.5rem;
		cursor:pointer;
		display:block;                    
	    word-break:keep-all;     
        white-space:nowrap;
		padding-left: 1rem;
		box-sizing: border-box;
	}
/* 	#dataList>div:first-child{
		margin-top: 0.5rem;
	} */
	#dataList>div:hover {
	    background-color: #113C77;
	}
	
	#dataList   .popper__arrow{
	  display:none;
	}
	#dataList::-webkit-scrollbar{
	  width: 10px;
	  background-color:#0A3269;
	}
	
	#dataList::-webkit-scrollbar-track {
	  background-color:#0A3269;
	}
	
	#dataList::-webkit-scrollbar-thumb  {
	  background:#1B44B3;
	  border-radius: 10px;
	}
	
	
    #dataList::-webkit-scrollbar {
	 /*滚动条整体样式*/
	 width: 10px;
	 /*高宽分别对应横竖滚动条的尺寸*/
	 height: 10px;
 }
 
    #dataList::-webkit-scrollbar-thumb {
	 /*滚动条里面小方块*/
	 border-radius: 10px;
	 background-color: #02adf7;
	
 }
 
    #dataList::-webkit-scrollbar-track {
	 /*滚动条里面轨道*/
	 -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	 background: #1b5aa9;
 }
 
 .layui-form-select dl dd:hover {
     background-color: #2053A1 !important;
 }
 
 .clearBtn{
	 
 }
</style>
</html>